<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        header a{
            text-decoration: none;
            color: black;
            font-size: 12px;
        }
        .el-table .el-table__cell{
            padding: 0;
        }
        ul{
            list-style: none;
        }
        li{
            height: 40px;
        }
        .el-main a{
            font-size: 15px;
            text-decoration: none;
            color: black;
            margin: 0 auto;
        }
        .el-main a:hover{
            color: #1e90ff;
        }
        .h a{
            text-decoration: none;
            border-radius: 30px;
            font-size: 15px;
        }
        .box1{
            font-size: 18px;
            margin-top: 15px;
            width: 100px;
            height: 40px;
            color: #082e54;
            background-color: bisque;
            border-radius: 10px 20px;
            text-align: center;
            padding-top: 13px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="width: 1160px;background-color: white; margin: 0 auto;">
                <el-row style="height: 50px;background-color:#ffe4c4;margin: 0 auto">
                    <el-col :span="24"><div class="grid-content bg-purple-dark">
                        <div style="float: right;font-size: 12px; position: relative;top:18px ;margin-right: 15px;">
                            <a href="/login.html">登录</a><el-divider direction="vertical"></el-divider>
                            <a href="/reg.html">注册</a><el-divider direction="vertical"></el-divider>
                            <a href="">购物车</a>
                        </div>
                    </div>
                    </el-col>
                </el-row>
                <img src="pictures/logo.jpg" style="height: 100px; width: 150px;margin-top:5px;vertical-align: middle" alt="">
                    <div style="float: right;position: relative;top:50px">
                        <el-input placeholder="请输入搜素内容" v-model="wd">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                </div>
            </div>
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto;">
            <el-row>
                <!--导航栏开始-->
                <el-col :span="5">
                    <el-menu
                            background-color="cornsilk"
                            default-active=""
                            class="el-menu-vertical-demo"
                            @select="handleSelect"
                            @open="handleOpen"
                            @close="handleClose">
                        <el-menu-item v-for="c in categoryArr" :index="c.id" style="text-align: center; height: 45px;line-height: 45px">
                            <!--<i class="el-icon-menu"></i>
                            <span slot="title">导航1</span>-->
                            {{c.name}}
                        </el-menu-item>
                    </el-menu>
                </el-col>
                <!--轮播图开始-->
                <el-col span="19">
                    <el-carousel  height="450px">
                        <el-carousel-item v-for="a in bannerArr">
                            <img :src="a.url" width="100%" height="100%" alt="">
                        </el-carousel-item>
                            </el-carousel>
                        </el-col>
                    </el-row>
            <el-row>
                <div style="background-color: red;height: 100px;margin-top: 15px"></div>
            </el-row >
            <!--商品列表开始-->
            <el-row style="border-radius: 30px;">
                <div class="box1">新书推荐</div>
                <el-col style="margin: 15px 0" span="6" v-for="p in productArr">
                    <el-card style="height: 450px">
                        <img :src="p.url" width="100%" alt="">
                        <div>
                            <p style="font-size: 20px;height: 40px;margin-bottom: 0;">
                                <a style="text-decoration: none;color: #3f3f3f" :href="'/detail.html?id='+p.id">
                                    {{p.title}}
                                </a>
                            </p>
                            <h3 style="color: firebrick;font-size: 20px; margin-top: 0; margin-bottom: 15px">￥{{p.price}}</h3>
                            <p style="font-size: 12px;color: #666;height: 32px">作者：{{p.author}}</p>
                            <p style="font-size: 12px;color: #666">
                                浏览量:{{p.viewCount}}
                                <span style="float: right">销量:{{p.saleCount}}件</span>
                            </p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
                </el-main>
        <el-footer style="width: 1200px;height: 100px; margin: 0 auto;">
            <div style="background-color: #3f3f3f;width: 1160px;font-size: 12px;padding: 10px 0px; text-align: center;color: #b1b1b1;">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
            </div>
        </el-footer>
    </el-container>
</div>

</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                user:{},
                wd: "",
                productArr:[],
                bannerArr:[],
                categoryArr: [
                    {id:"1",name:"摄影"},
                    {id:"2",name:"发生纠纷"},
                    {id:"3",name:"文学"},
                    {id:"4",name:"发的开发"},
                    {id:"5",name:"全国爱上对方可"},],
                }
            },
            methods:{
                handleSelect(key,keyPath){
                    console.log(key,keyPath);
                    //跳转到结果页面 把分类id传递过去
                    location.href="/booksort.html?id="+key;
                },
                search()
                {
                    v.$message("搜索的内容是" + v.wd)
                },
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                }
            },
            created:function () {
                /*//发请求获取当前登录的用户对象
                axios.get("/currentUser").then(function (response) {
                    alert("user=" + response.data);
                    v.user = response.data;
                    if (v.user == "") {
                        alert("请先登录!")
                        location.href = "/login.html"
                    }
                })*/
                //获取轮播图列表
                axios.get("/banner/select").then(function (response) {
                    v.bannerArr = response.data;
                })
                //获取分类列表
                axios.get("/category/select").then(function (response) {
                    v.categoryArr = response.data;
                })
                //获取商品列表
                axios.get("/product/select").then(function (response) {
                    v.productArr = response.data;
                })
            }
        })

</script>
</html>